<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!doctype html>
<html  class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/xian5.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>
        function successFn(data) {
            $("#userId").attr("value", data.userId);
            $("input[name='userId']").attr("value", data.userId);
            $("input[name='nickName']").attr("value", data.nickName);
            $("input[name='realName']").attr("value", data.realName);
            $("input[name='age']").attr("value", data.age);
            $("input[name='email']").attr("value", data.email);
            $("input[name='sex']").each(function (index, item) {
                if (item.value == data.sex) {
                    $(item).attr("checked", true);
                }
            })
        }
        function failFn() {
            location.href = '${pageContext.request.contextPath}/2/error';
        }
        function ajaxData() {
            $.get(
                "${pageContext.request.contextPath}/user/info",
                function (result) {
                    xian5HandlerResult(result, successFn, failFn);
                },
                "json"
            );
        }
    </script>
</head>
<body onload="ajaxData()">
<form class="layui-form" action="${pageContext.request.contextPath}/user/updateInfo" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" id="userId" autocomplete="off" class="layui-input" disabled>
            <input type="hidden" name="userId" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
            <input type="text"  name="nickName" required lay-verify="required|nickName" placeholder="请输入昵称" autocomplete="off" class="layui-input" readonly>
        </div>
        <div class="layui-form-mid layui-word-aux"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">真实姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="realName" required lay-verify="required|realName" placeholder="请输入真实姓名" autocomplete="off" class="layui-input" readonly>
        </div>
        <div class="layui-form-mid layui-word-aux"></div>
    </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-inline">
            <input type="text"  name="age" required lay-verify="required|number|age" placeholder="请输入年龄" autocomplete="off" class="layui-input" readonly>
        </div>
        <div class="layui-form-mid layui-word-aux"></div>
    </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-inline">
            <input type="text"  name="email" required lay-verify="required|email" placeholder="请输入邮箱地址" autocomplete="off" class="layui-input" readonly>
        </div>
        <div class="layui-form-mid layui-word-aux"><font color="red">* 用于事件通知</font></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="0" title="保密" disabled>
            <input type="radio" name="sex" value="1" title="男" disabled>
            <input type="radio" name="sex" value="2" title="女" disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开启修改</label>
        <div class="layui-input-block">
            <!-- // DOTO：lay-skin="switch" 时，监听无效 -->
            <input type="checkbox" lay-skin="primary" lay-text="ON|OFF"  lay-filter="updateswitch" >
        </div>
    </div>
    <div class="layui-form-item" id="submitDom" style="display: none;">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="login">更新</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    function updateSucess() {
        location.reload(true);
    }
    function enableEdit() {
        $("input[name]").removeAttr("readonly");
        $("input[name='sex']").removeAttr("disabled");
    }
    function disableEdit() {
        $("input[name]").attr("readonly", "readonly");
        $("input[name='sex']").attr("disabled", "disabled");
    }
    $(function  () {
        layui.use('form', function(){
            var form = layui.form;
            form.on('checkbox(updateswitch)', function(data){
                if (data.elem.checked) {
                    $("#submitDom").show();
                    enableEdit();
                } else {
                    $("#submitDom").hide();
                    disableEdit();
                }
                form.render();
            });
            xian5Verify(form);
            //监听提交
            form.on('submit(login)', function(data){
                // alert(888)
                $.ajax({
                    type: "POST",
                    url: data.form.action,
                    data: data.field,
                    success: function(result){
                        xian5HandlerResult(result, updateSucess, null);
                    }
                });
                return false;
            });
        });
    })
</script>
<!-- 底部结束 -->
</body>
</html>
